
// @ts-ignore;
import React from 'react';
// @ts-ignore;
import { Button } from '@/components/ui';
// @ts-ignore;
import { Paintbrush, Image, User } from 'lucide-react';

export default function Home(props) {
  const {
    $w
  } = props;
  
  const handleNavigation = pageId => {
    $w.utils.navigateTo({
      pageId,
      params: {}
    });
  };
  
  return <div className="relative h-screen overflow-hidden">
      {/* 纯CSS粒子背景 */}
      <div className="absolute inset-0 bg-gradient-to-br from-purple-600 via-purple-500 to-purple-400 -z-10">
        {/* 粒子效果 */}
        <div className="absolute inset-0 overflow-hidden">
          {[...Array(80)].map((_, i) => (
            <div 
              key={i}
              className="absolute rounded-full bg-white opacity-50"
              style={{
                width: `${Math.random() * 4 + 2}px`,
                height: `${Math.random() * 4 + 2}px`,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animation: `float ${Math.random() * 10 + 5}s infinite ${Math.random() * 5}s ease-in-out`,
                transform: `translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px)`
              }}
            />
          ))}
        </div>
      </div>

      {/* 主内容区 */}
      <div className="container mx-auto px-4 h-full flex flex-col justify-center items-center">
        <h1 className="text-5xl md:text-6xl font-bold text-white mb-8 text-center">艺术展馆</h1>
        <p className="text-xl text-white opacity-80 mb-12 max-w-2xl text-center">探索无限创意，发现艺术之美</p>
      </div>

      {/* 底部浮动导航栏 */}
      <div className="fixed bottom-0 left-0 right-0 bg-white bg-opacity-90 backdrop-blur-sm py-4 px-6 shadow-lg rounded-t-3xl">
        <div className="flex justify-around max-w-md mx-auto">
          <Button onClick={() => handleNavigation('studio')} className="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-full flex items-center transition-transform hover:-translate-y-1 hover:shadow-lg">
            <Paintbrush className="mr-2" /> 创作间
          </Button>
          <Button onClick={() => handleNavigation('gallery')} className="bg-pink-600 hover:bg-pink-700 text-white font-semibold py-3 px-6 rounded-full flex items-center transition-transform hover:-translate-y-1 hover:shadow-lg">
            <Image className="mr-2" /> 展厅
          </Button>
          <Button onClick={() => handleNavigation('profile')} className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-6 rounded-full flex items-center transition-transform hover:-translate-y-1 hover:shadow-lg">
            <User className="mr-2" /> 我的展馆
          </Button>
        </div>
      </div>

      {/* 粒子动画样式 */}
      <style jsx>{`
        @keyframes float {
          0%, 100% {
            transform: translate(0, 0);
          }
          50% {
            transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px);
          }
        }
      `}</style>
    </div>;
}
